import { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import { Spin, Icon, Select, Modal, Form } from 'antd';

class ChangeLevelModal extends Component {
  componentDidMount() {
    const { dispatch, customerId } = this.props;

    dispatch({
      type: 'customers/fetchLevels',
    });
    dispatch({
      type: 'customers/fetchStudy',
      payload: customerId,
    });
  }

  handleSubmit = () => {
    const { onOk } = this.props;
    this.props.form.validateFields((err, values) => {
      if (err) {
        return;
      }
      onOk(values);
    });
  };

  render() {
    const { loadingLevels, loadingStudy, onCancel, study, levels, form } = this.props;
    const { currentLevel } = study;
    const { getFieldDecorator } = form;

    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 16 },
    };

    return (
      <Modal
        title={
          <>
            <Icon type="edit" />&nbsp;&nbsp;修改学习等级
          </>
        }
        visible={true}
        onOk={this.handleSubmit}
        onCancel={onCancel}>
        <Form onSubmit={this.okHandler}>
          <Form.Item {...formItemLayout} label="当前学习等级">
            <Spin
              size="small"
              spinning={loadingStudy}
              style={{ display: 'inline-block', marginLeft: 7, width: 'auto' }}>
              L{currentLevel}
            </Spin>
          </Form.Item>
          <Form.Item {...formItemLayout} label="等级">
            {getFieldDecorator('level', {
              rules: [
                {
                  required: true,
                  message: '等级是必选项',
                },
              ],
            })(
              loadingLevels ? (
                <Spin size="small" spinning={true} />
              ) : (
                <Select
                  showSearch={true}
                  placeholder="请选择新的等级"
                  optionFilterProp="children"
                  filterOption={(input, option) => {
                    return option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0;
                  }}>
                  {levels.map(item => {
                    return (
                      <Select.Option
                        key={item.id}
                        value={item.level}
                        disabled={item.level === currentLevel}>
                        L{item.level}
                      </Select.Option>
                    );
                  })}
                </Select>
              )
            )}
          </Form.Item>
        </Form>
      </Modal>
    );
  }
}

if (process.env.UMI_ENV !== 'prod') {
  ChangeLevelModal.propTypes = {
    onOk: PropTypes.func.isRequired,
    onCancel: PropTypes.func.isRequired,
    form: PropTypes.object.isRequired,
    dispatch: PropTypes.func.isRequired,
    customerId: PropTypes.number.isRequired,
    levels: PropTypes.array.isRequired,
    study: PropTypes.object.isRequired,
    loadingLevels: PropTypes.bool.isRequired,
    loadingStudy: PropTypes.bool.isRequired,
  };
}

ChangeLevelModal.defaultProps = {
  form: {},
  dispatch: () => {},
  onCancel: () => {},
  onOk: () => {},
  customerId: 0,
  levels: [],
  study: {},
  loadingLevels: false,
  loadingStudy: false,
};

function mapStateToProps({ loading, customers }, ownProps) {
  const { levels, study } = customers;
  const { customerId } = ownProps;
  return {
    study,
    levels,
    customerId,
    loadingLevels: loading.effects['customers/fetchLevels'],
    loadingStudy: loading.effects['customers/fetchStudy'],
  };
}

export default connect(mapStateToProps)(Form.create()(ChangeLevelModal));
